<template>
  <div style="width: 100%">
    <el-form
      :disabled="disabled"
      :model="formData"
      :rules="rules"
      size="small"
      ref="form"
      label-width="100px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="驱动名称" prop="driverClassName">
            <el-input v-model="formData.driverClassName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据库类型" prop="type">
            <el-select v-model="formData.type" style="width: 100%">
              <el-option label="mysql" value="mysql"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="连接地址" prop="url">
            <el-input v-model="formData.url"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="密码" prop="password">
            <el-input v-model="formData.password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="标签">
            <el-input v-model="formData.label" readonly>
              <el-button slot="append">添加</el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>

    <div class="md-component-btns">
      <el-button size="medium" v-if="!disabled" @click="testLink"
        >测试连接</el-button
      >
      <el-button
        size="medium"
        type="primary"
        v-if="disabled"
        @click="dialogType = 'edit'"
        >编辑</el-button
      >
      <el-button size="medium" type="primary" v-if="!disabled" @click="save"
        >保存</el-button
      >
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/dbbaseConfig/index";

export default {
  name: "dbbaseTemp",
  props: {
    type: String,
    data: Object,
  },
  data() {
    return {
      formData: {
        name: "",
        type: "",
        driverClassName: "",
        url: "",
        username: "",
        password: "",
        label: "",
        state: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        type: [
          { required: true, message: "请输入数据库类型", trigger: "blur" },
        ],
        url: [{ required: true, message: "请输入连接地址", trigger: "blur" }],
        driverClassName: [
          { required: true, message: "请输入驱动名称", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },

      dialogType: "open",
    };
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    },
  },
  methods: {
    async testLink() {
      const flag = await this.$refs["form"].validate();
      if (flag) {
        api.queryConnection(this.formData).then((res) => {
          if (res.data.data) {
            this.$message.success("可用");
          } else {
            this.$message.error("不可用");
          }
        });
      }
    },
    async save() {
      const flag = await this.$refs["form"].validate();
      if (flag) {
        let method = this.dialogType === "edit" ? "update" : "save";
        api[method](this.formData).then(() => {
          this.$message.success("保存成功");
          this.$emit("refresh");
          this.$emit("removeThisTabs");
        });
      }
    },
    getDetail(row) {
      api.detail({ id: row.oid }).then((res) => {
        Object.assign(this.formData, res.data.data);
      });
    },
    edit(row) {
      this.dialogType = "edit";
      this.getDetail(row);
    },
    view(row) {
      this.dialogType = "view";
      this.getDetail(row);
    },
    open() {
      this.dialogType = "open";
    },
  },
};
</script>

<style scoped>
</style>
